<template>
    <div>
        <el-drawer :model-value="visible" title="项目信息" size="500px" @close="closeHandle" @closed="closed">
            <div class="demo-drawer__content">
                <el-form :model="form" ref="formRef" :rules="formRules" label-position="right">
                    <el-form-item :label-width="formLabelWidth" prop="name" label="姓名" required>
                        <el-input v-model="form.name" placeholder="请输入" autocomplete="off" />
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" prop="mobile" label="手机号码" required>
                        <el-input v-model="form.mobile" placeholder="请输入" autocomplete="off" />
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="微信">
                        <el-input v-model="form.wx" placeholder="请输入" autocomplete="off" />
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="类型" prop="type" required>
                        <el-select v-model="form.type">
                            <el-option v-for="(item, index) in statusOption" :key="index" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="城市" prop="city" required>
                        <el-cascader :props="propsValue" v-model="form.city" />
                    </el-form-item>
                    <el-form-item label="详细地址" :label-width="formLabelWidth" prop="address" required>
                        <el-input placeholder="请输入详细地址" v-model="form.address" show-word-limit rows="4" type="textarea"
                            autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="备注" :label-width="formLabelWidth">
                        <el-input v-model="form.content" placeholder="请输入备注" show-word-limit rows="4" type="textarea"
                            autocomplete="off" />
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <el-space>
                    <el-button type="info" plain :loading="loading" @click="cancelHandle">取消</el-button>
                    <el-button type="primary" :loading="loading" @click="confirmHandle">提交保存</el-button>
                </el-space>
            </template>
        </el-drawer>
    </div>
</template> 
<script setup>
import { reactive, ref, computed, watch } from "vue"
import { getAddress, addkehu } from "@/api/supplier.js"
import { toast } from "@/hook/toast";
import { delay } from "@/utils";
import { pid } from "process";

const formRef = ref(null)
const emits = defineEmits(['update:modelValue', 'addSuccess'])
const form = reactive({
    name: '',
    mobile: '',
    wx: '',
    kehu_id: '',
    type: '',
    city: '',
    address: '',
    content: ''
})

const formRules = computed(() => ({
    name: [
        {
            required: true,
            message: '请输入客户姓名',
            trigger: 'chage'
        }
    ],
    mobile: [
        {
            required: true,
            message: '请输入电话号码',
            trigger: 'chage'
        }
    ],
    type: [
        {
            required: true,
            message: '请选择类型',
            trigger: 'chage'
        }
    ],
    city: [
        {
            required: true,
            message: '请选择城市',
            trigger: 'chage'
        }

    ],
    address: [
        {
            required: true,
            message: '请输入详细地址',
            trigger: 'chage'
        }
    ],

}))
const formLabelWidth = '80px'
const loading = ref(false);
const props = defineProps({
    modelValue: {
        type: Boolean,
        required: true,
    }

})
const propsValue = ref()
const id = 0
propsValue.value = {
    lazy: true,
    async lazyLoad(node, resolve) {
        const { level, value } = node;
        const pid = value || 0
        const { data } = await getAddress({ pid });
        const nodes = []
        if (data) {
            data.map((item) => {
                let obj = {
                    value: item.id,
                    label: item.label,
                    leaf: node.level >= 0,
                };
                nodes.push(obj);
            });
        }
        resolve(nodes);
    }
}

const visible = computed({
    get() {
        return props.modelValue
    },
    set(value) {
        console.log(value, '属性')
        emits('update:modelValue', value)
    }
})
const cityList = ref([])
// 获取省市区id
async function getMarketId() {
    const pid = ''
    const resD = await getAddress({ pid })

    console.log(resD, '获取省市区的数据')


    const { code, data, msg } = resD
    if (code !== 1) return
    if (!!data && data.length) {
        cityList.value = data.map(item => {
            const { id, label } = item
            return { value: id, label: label }
        })
    }

}


// 客户类型
const statusOption = computed(() => [
    {
        label: '企业',
        value: 1
    },
    {
        label: '个人',
        value: 2,
    }
])

// 关闭组件
function closed() {
    resetForm()
}
const closeHandle = () => {
    visible.value = false
};
const cancelHandle = () => {
    visible.value = false
}

// 提交保存
function confirmHandle() {
    formRef.value.validate(async flag => {
        if (!flag) return
        loading.value = true
        const { name, mobile, wx, kehu_id, type, city, address, content } = form
        const payload = {
            name, mobile, wx, kehu_id, type, address, content
        }
        payload.city = city.toString()
        console.log(payload, 'shuju')
        loading.value = false
        const resp = await addkehu(payload)
        console.log(resp, '返回的数据');
        const { code, msg } = resp
        await delay(200)
        toast({ title: msg })
        loading.value = false
        if (code !== 1) return
        triggerUpdate()
    })

}
// 通知组件是否重新刷新 和关闭组件
function triggerUpdate() {
    emits('addSuccess')
    resetForm()
    visible.value = false
}

// 编辑传来的方法
function editHandle(row) {
    console.log('传来的参数', row)
    const {
        name,
        mobile,
        content,
        city,
        address,
        type,
        wx,
        id
    } = row
    form.name = name
    form.mobile = mobile
    form.content = content
    form.city = city
    form.address = address
    form.wx = wx
    form.type = type
    form.kehu_id = id
    visible.value = true
}

defineExpose({
    editHandle,
})

watch(() => props.modelValue, value => {
    if (!value) {
        return
    }
    // getMarketId()
})

// 清空数组 并关闭
function resetForm() {
    form.name = ''
    form.mobile = ''
    form.wx = ''
    form.kehu_id = ''
    form.type = ''
    form.city = ''
    form.address = ''
    form.content = ''
    formRef.value.resetFields()
}
</script>
<style></style>